<template>
  <div class="w h over-h">
    <div class="category-title a-i-c f-s dialog-page-title">
      <el-button type='text' icon="ArrowLeft" @click="goBackToPage">返回</el-button>
      <div class="m-l10">
        项目创建
      </div>
    </div>
    <div class="w f-c a-i-c" :style="normalBodyHeight">
      <div class="w box-b p10">
        <el-steps :active="createdStep" finish-status="success" simple>
          <el-step title="选择类型" />
          <el-step title="提交信息" />
          <!-- <el-step title="完成" /> -->
        </el-steps>
        <div v-if="createdStep == 0">
          <div class="w f-b m-t10 project-type">
            <mark-type v-model="projectType" @click="createdStep = 1"></mark-type>
          </div>
        </div>

        <template v-else>
          <div class="m-t10">
            <lm-form :ref="editFormRefKey" inline label-width="140px" class="lm-w lm-h"
              :layout="editFromLayout" v-model="editForm">
              <template #photoFile>
                <el-upload ref="upload-box" v-model:file-list="fileList" :auto-upload="false"
                  action="#" list-type="picture-card" class="m10 w-120 h-120 f-c  a-i-c b-i1 r2"
                  :class="{ 'no-chose-image': fileList.length > 0 }" accept="image/*">
                  <el-icon-render class="el-icon-plus" :size="30" color="#ccc">
                  </el-icon-render>
                </el-upload>
              </template>
              <template #industry>
                <el-cascader class="w" v-model="editForm.industry" clearable
                  :options="industryOptions"></el-cascader>
              </template>
            </lm-form>
            <div class="lm-w lm-h lm-f-s">
              <div class="lm-w-120 lm-h"></div>
              <el-button type="primary" v-loading="buttonLoading" @click="submit">提交</el-button>
              <el-button type="danger" @click="reset" plain>重置</el-button>
              <el-button type="primary" @click="goBackToPage()" plain>返回</el-button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { Project, type ProjectInfo } from '@/apis/project/index'
import { RequestCode } from '@/server/base'
import { ValidateFieldsError } from 'async-validator'
import markType from '../components/mark-type.vue'
import { ElIconRender } from '@/importComponents'

export default {
  name: 'ProjectEdit',
  mixins: [frameProperty],
  props: {
    goBackToPage: Function,
    params: [Object, Array]
  } as any,
  components: { markType, ElIconRender },
  data() {
    return {
      createdStep: 0,
      projectType: 0,

      editFormRefKey: 'ProjectModifyRef',
      menuTree: [],
      editForm: {} as {} | ProjectInfo | any,
      editFromLayout: [
        {
          prop: 'projectName',
          label: '项目名称',
          type: 'input',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          required: true,
          clearable: true,
          regex: /^.{0,20}$/
        },
        {
          prop: 'industry',
          label: '所属行业',
          type: 'slot',
          itemClass: 'column_1',
          message: '请输入2-20个字符',
          required: true,
          clearable: true
        },
        {
          prop: 'photoFile',
          label: '头图',
          type: 'slot'
        },
        {
          prop: 'projectDesc',
          label: '项目描述',
          type: 'textarea',
          rows: 5,
          itemClass: 'column_1',
          message: '请输入2-200个字符',
          clearable: true,
          required: true
        }
      ] as any[],
      buttonLoading: false,
      industryOptions: [] as any[],

      fileList: []
    }
  },
  computed: {
    modifyInfo(): any {
      let row = this.params.row || {}
      return row
    }
  },
  methods: {
    getIndustryList() {
      Project.industryList()
        .then((res: RequestCode) => {
          function getValue(item: industryType): {
            value: string
            label: string
            children?: any[]
          } {
            return {
              value: item.id + '',
              label: item.industryName,
              children: item.children?.map((ch: industryType) => getValue(ch)) || []
            }
          }

          this.industryOptions = res.data.map((item: industryType) => {
            return getValue(item)
          })
        })
        .catch(e => {})
    },
    /**
     * 选择文件并上传
     */
    chooseFileChange(e: any) {
      console.log(e)
    },
    getDataList() {},
    getDetailById() {
      if (!this.modifyInfo) {
        return
      }
      this.editForm = this.modifyInfo
    },
    saveProjectInfo() {
      this.buttonLoading = true

      const { industry, ...params } = this.editForm
      params.projectType = this.projectType
      params.industry = industry[0]
      // const method = this.params.isEdit ? Project.modifyProjectInfo : Project.addProjectInfo
      const method = Project.saveProjectInfo
      method(this.fileList[0], params)
        .then((res: RequestCode) => {
          this.buttonLoading = false
          this.showMessage({ type: 'success', message: '操作成功！' })
          this.goBackToPage(true)
        })
        .catch((error: any) => {
          this.buttonLoading = false
        })
    },
    //验证数据
    submit() {
      if (this.fileList.length <= 0) {
        ;(this as any).$message.error('请选择头图！')
        return
      }
      const editFormRef = this.$refs[this.editFormRefKey] as any
      editFormRef.validate((isValid: boolean, invalidFields?: ValidateFieldsError) => {
        if (!isValid) {
          //滚动到未通过校验的字段
          if (invalidFields && Object.keys(invalidFields).length > 0) {
            editFormRef.scrollToField(Object.keys(invalidFields)[0])
          }
          return
        }
        this.saveProjectInfo()
      })
    },
    //重置
    reset() {
      this.editForm = {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.getDetailById()
      this.getDataList()
    })
    this.getIndustryList()
  }
}

type industryType = {
  id: number | string
  industryName: string
  parentId: number
  children?: industryType[]
}
</script>

<style  lang="scss">
.no-chose-image ul > div {
  display: none !important;
}
</style>